<template>
  <div class="index">
    <LoginTop/>
    <div class="jh-guid">
      <div class=" hm-bd">
        <span>您当前的位置：</span>
        <a @click="$router.push('/index')" href="javascript:void(0)">首页</a>
        <i>></i>
        <a href="javascript:void(0)" @click="$router.push('/index')">登录</a>
        <i>></i>
        <a href="javascript:void(0)" @click="$router.push('/register')">注册</a>
        <i>></i>
        <a href="javascript:void(0)">找回密码</a>
      </div>
    </div>
    <div class="jh-bd">
      <div class="hm-bd zhmm-con">
        <div class="zhmm-head">
          <span class="zhmm-title">忘记密码</span>
          <ul class="zhmm-head-lis" id="zhmm-step">
            <li class="zhmm-step">
              <span>1</span>
              <p>填写帐号</p>
            </li>
            <li>
              <span>2</span>
              <p>验证身份</p>
            </li>
            <li>
              <span>3</span>
              <p>设置新密码</p>
            </li>
            <li>
              <span>4</span>
              <p>完成</p>
            </li>
          </ul>
        </div>

        <!-- step 1 -->
        <div class="zhmm-step1-con" id="zhmmStep1">
          <div class="zhmm-s1-head" id="step1-guid">
            <span class="zhmm-step1-se" onclick="loginChange('step1-email','step1-phone')">邮箱找回</span>
            <i><img src="../../assets/zhmm-step1-hl.png"></i>
            <span onclick="loginChange('step1-phone','step1-email')">手机找回</span>
          </div>
          <!-- 邮箱找回 -->
          <div class="zhmm-s1-txzh" id="step1-email">
            <input type="text" v-model="email" placeholder="请输入您注册/登录的邮箱" class="zhmm-s1-input zhmm-s1-input-email" id="zhmmemail">
            <div class="zhmm-s1-yzm">
              <input type="text" v-model="emailCodeImg" placeholder="验证码" id="zhmmeyzm" autocomplete="off">
              <img :src="codeImg" @click="getCodeImg()">
            </div>
            <div id="zhmmebut">
              <button class="zhmm-step-button" @click.stop="verifyUser(2)">下一步</button>
            </div>
          </div>
          <!-- 手机找回 -->
          <div class="zhmm-s1-txzh" style="display: none" id="step1-phone">
            <input type="text" v-model="phone" placeholder="请输入您注册/绑定的手机号" class="zhmm-s1-input zhmm-s1-input-phone" id="zhmmphone">
            <div class="zhmm-s1-yzm">
              <input type="text" v-model="phoneCodeImg" placeholder="验证码" id="zhmmpyzm" autocomplete="off">
              <img :src="codeImg" @click="getCodeImg()">
            </div>
            <div id="zhmmpbut">
              <button class="zhmm-step-button" @click.stop="verifyUser(1)">下一步</button>
            </div>
          </div>
        </div>
        <!-- step 1 end -->
        <!-- step 2 -->
        <div class="zhmm-step2-con" id="zhmmStep2" style="display: none">
          <div class="zhmm-s2-head">
            <span><img src="../../assets/zhmm-yzsf-head.png"></span>
            <span>您正在使用手机号找回密码方式，为了您的账号安全，请完成身份验证</span>
          </div>
          <div class="zhmm-s2-con">
            <div class="zhmm-s2-c-phone">
              手机号：
              <i>{{starPhone}}</i>
            </div>
            <div class="zhmm-s2-c-yzm">
              <input v-model="phoneCode" type="text" placeholder="请输入收到的短信验证码" id="yzsfpyzm" autocomplete="off">
              <button id="preget">
                <i>60</i>秒后重新获取</button>
              <button class="zhmm-hid-buttn" id="pget" @click="redeemByPhone()">重新获取</button>
            </div>
          </div>
          <div id="yzsfpbut">
            <button class="zhmm-step-button" @click.stop="verifyCode(1)">下一步</button>
          </div>
        </div>
        <!-- 邮箱找回 -->
        <div class="zhmm-step2-con" id="zhmmStep2e" style="display: none">
          <div class="zhmm-s2-head">
            <span><img src="../../assets/zhmm-yzsf-head.png"></span>
            <span>您正在使用邮箱找回密码方式，为了您的账号安全，请完成身份验证</span>
          </div>
          <div class="zhmm-s2-con">
            <div class="zhmm-s2-c-phone">
              邮箱账号：
              <i>{{this.email}}</i>
            </div>
            <div class="zhmm-s2-c-yzm">
              <input v-model="emailCode" type="text" placeholder="请输入收到的邮箱验证码" id="yzsfeyzm">
              <button id="ereget">
                <i>60</i>秒后重新获取</button>
              <button class="zhmm-hid-buttn" id="eget" @click="redeemByEmail()">重新获取</button>
            </div>
          </div>
          <div id="yzsfebut">
            <button class="zhmm-step-button" @click.stop="verifyCode(2)">下一步</button>
          </div>
        </div>
        <!-- step 2 end -->
        <!-- step 3 -->
        <div class="zhmm-step3-con" id="zhmmStep3" style="display: none">
          <div class="zhmm-s3-head">
            <span><img src="../../assets/zhmm-yzsf-head.png"></span>
            <span>密码支持6-16个字符，建议数字、字母、符号组合</span>
          </div>
          <div class="zhmm-s3-save">
            <input type="password" v-model="password" placeholder="请输入您要设置的新密码" id="zhmmpass" autocomplete="off">
            <img :src="images[0].src" id="zhmmpassImg">
          </div>
          <div id="zhmmsave">
            <button class="zhmm-step-button" @click.stop="modifyPassword()">保存</button>
          </div>
        </div>
        <!-- step 3 end -->
        <!-- step 4 -->
        <div class="zhmm-step3-con" id="zhmmStep4" style="display: none">
          <div class="zhmm-s4-head">
            <span><img src="../../assets/jh-g.png"></span>
            <span>您已成功重置密码，请使用新密码
              <a href="javascript:void(0)" @click="$router.push('/index')">登录</a>
            </span>
          </div>
          <button class="zhmm-step-button" @click="$router.push('/index')">马上登录</button>
        </div>
        <!-- step 4 end -->
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
// import $ from 'jquery'
import LoginTop from '@/components/login-top'
import Footer from '@/components/footer'
import * as api from '@/service/api'
import uuid from 'uuid'
import $ from 'jquery'
export default {
  title: '用户中心-找回密码',
  components: {
    LoginTop,
    Footer
  },
  data () {
    return {
      globalThis: null,
      email: null,
      emailCode: null,
      phone: '',
      phoneCode: null,
      emailCodeImg: '',
      phoneCodeImg: '',
      codeImg: null,
      password: null,
      uuid: uuid(),
      curType: null,
      images: [{ src: require('../../assets/zhmm-eye-c.png') }, { src: require('../../assets/zhmm-eye.png') }],
      loading: false
    }
  },
  created () {
    this.getCodeImg()
  },
  computed: {
    starPhone () {
      return this.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
  },
  mounted () {
    this.globalThis = window
    this.globalThis.zhmmStep1() // 找回密码填写帐号
    this.globalThis.zhmmSub() // 找回密码提交信息
    // this.globalThis.showPass() // 设置密码显示隐藏
    this.showPass() // 设置密码显示隐藏
  },
  methods: {
    async getCodeImg () {
      try {
        let res = await api.getCodeImg({
          uuid: this.uuid,
          t: (new Date()).getTime()
        })
        this.codeImg = window.URL.createObjectURL(res.data)
      } catch (err) {
        console.log(err)
      }
    },
    async verifyUser (type) {
      if ((type === 1 && !this.phone) || (type === 2 && !this.email)) {
        window.layer.msg('请输入账号！', {
          icon: 2,
          time: 1000
        })
        return false
      }
      if ((type === 1 && this.phoneCodeImg.length < 4) || (type === 2 && this.emailCodeImg.length < 4)) {
        window.layer.msg('请输入正确的验证码！', {
          icon: 2,
          time: 1000
        })
        return false
      }
      // 账号验证
      try {
        this.curType = type
        await api.verifyUser({
          userAccount: type === 1 ? this.phone : this.email,
          code: type === 1 ? this.phoneCodeImg : this.emailCodeImg
        })
        if (type === 1) {
          $('#zhmmpbut').trigger('click')
        } else {
          $('#zhmmebut').trigger('click')
        }
      } catch (e) {
        this.getCodeImg()
        // 阻止事件冒泡
        return false
      }
    },
    async redeemByPhone () {
      // 手机验证码
      try {
        await api.redeemByPhone({
          phone: this.phone
        })
      } catch (e) {
        console.log(e)
      }
    },
    async redeemByEmail () {
      // 邮箱验证码
      try {
        await api.redeemByEmail({
          email: this.email
        })
      } catch (e) {
        console.log(e)
      }
    },
    async modifyPassword () {
      // 修改密码
      try {
        let curData = {
          password: this.password
        }
        if (this.curType === 1) {
          curData.phone = this.phone
        } else {
          curData.email = this.email
        }
        await api.modifyPassword(curData)
        $('#zhmmsave').trigger('click')
      } catch (e) {
        console.log(e)
        return false
      }
    },
    async verifyCode (type) {
      // 验证找回验证码
      try {
        await api.verifyCode({
          email: this.email,
          phone: this.phone,
          code: type === 1 ? this.phoneCode : this.emailCode,
          type: type
        })
        if (type === 1) {
          $('#yzsfpbut').trigger('click')
        } else {
          $('#yzsfebut').trigger('click')
        }
      } catch (e) {
        console.log(e)
        return false
      }
    },
    showPass () {
      let show = false
      let that = this
      $('#zhmmpassImg').click(function () {
        if (show === false) {
          $('#zhmmpass').attr('type', 'text')
          $('#zhmmpassImg').attr('src', that.images[1].src)
          show = true
        } else {
          $('#zhmmpass').attr('type', 'password')
          $('#zhmmpassImg').attr('src', that.images[0].src)
          show = false
        }
      })
    }
  }
}
</script>
<style lang="scss">
.index {
}
</style>
